<template>
  <div class="box">
    <div class="router-name">
      <a-button ghost class="back" @click="backClick()">返回</a-button>
      <span> {{ getTitle }}-发布详情 </span>
    </div>
    <div class="top_tips">
      如果发布状态提示发布失败原因为【账号登录已过期、用户未登录】类似这种的，请您先先重新授权对应的账号之后，再点击【重新发布】按钮
    </div>
    <div class="top_tips" v-if="$route.query.platform=='douyin'">
      （如果点击 [前往抖音查看] 显示视频不存在，可能是抖音审核中或用户已主动删除导致）
    </div>
    <a-spin :spinning="modelLoading">
      <a-table
        style="margin-top: 10px"
        :dataSource="dataSource"
        :columns="columns"
        @change="handleTableChange"
        :loading="loading"
        :pagination="false"
        :scroll="{ x: 2500 }"
        :row-selection="rowSelection"
        :rowKey="(record) => record.id"
      >
        <template #title v-if ="send_type !== 'qr_code'">
          <div
            style="
              display: flex;
              align-items: center;
            "
          >
            <a-button
              type="primary"
              @click="onBatchCancel"
              :disabled="!selectedRowKeys.length"
              :loading="onBatchLoading"
              >批量取消</a-button
            >
            <p style="margin: 0; margin-left: 20px; color: red;">同一账号发布将会间隔15-30分推送给平台</p>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'film_release'">
            <a-space>
              <a-image
                :preview="false"
                :width="30"
                :height="30"
                :src="record?.film_release?.platform_text.image"
              ></a-image>
              <span>{{
                record?.film_release?.platform_text?.value || "--"
              }}</span>
            </a-space>
            <a-divider style="height: 1px" dashed />
            <span style="font-size: 12px; line-height: 12px; color: #999"
              >创建时间：{{ record?.created_at }}</span
            >
            <div
              style="
                font-size: 12px;
                line-height: 12px;
                color: #999;
                margin-top: 3px;
              "
              v-if="record?.film_release?.release_type == 1"
            >
              发布方式：立即发布 （{{record?.id}}-{{ record?.job_type == 1 ? '服务端' : '本地' }}）
            </div>

            <template v-if="record?.film_release?.release_type == 6">
              <div
                style="
                  font-size: 12px;
                  line-height: 12px;
                  color: #999;
                  margin-top: 3px;
                "
              >
                发布方式：预约发布（{{record?.id}}-{{ record?.job_type == 1 ? '服务端' : '本地' }}）
              </div>
              <div
                style="
                  font-size: 12px;
                  line-height: 12px;
                  color: #999;
                  margin-top: 3px;
                "
              >
                发布方时间：{{ record?.expected_release_time }}
              </div>
            </template>
         
            <a-popover>
              <template #content>
                <p>本视频预计发布时段</p>
                <p>开始时间：{{ record?.timed_release_data?.start_time }}</p>
                <p>结束时间：{{ record?.timed_release_data?.end_time }}</p>
              </template>
              <div
                style="
                  font-size: 12px;
                  line-height: 12px;
                  color: #999;
                  margin-top: 3px;
                  cursor: pointer;
                "
                v-if="record?.film_release?.release_type == 2"
              >
                发布方式：定时发布（{{record?.id}}-{{ record?.job_type == 1 ? '服务端' : '本地' }}）
              </div>
            </a-popover>
            <div 
                style="
                  font-size: 12px;
                  line-height: 12px;
                  color: #999;
                  margin-top: 8px;
                " v-if="record?.film_release?.release_type ==2">
                预计发布时间: {{ record?.expected_release_time }}
                <a-tooltip>
                  <template #title>
                    只是预估，具体以实际发布时间为准。
                  </template>
                  <question-circle-outlined /> 
                </a-tooltip>
              </div>

            <a-divider style="height: 1px" dashed />
            <a-space style="font-size: 12px; line-height: 12px; color: #999">
              <span v-if="record?.send_type == 'api'"
                >发布账号：{{ record?.platform_account?.nickname }}
                <a-image
                  :preview="false"
                  :width="25"
                  :height="25"
                  :style="{
                    borderRadius: '15px',
                    alignItems: 'center',
                    justifyContent: 'center',
                    display: 'unset',
                  }"
                  :src="record?.platform_account?.avatar"
              /></span>
              <span v-if="record?.send_type == 'qr_code'">
                <a-tooltip placement="top">
                  <template #title>
                    <span>
                      扫码过期时间「{{
                        utils.formatTimestamp(
                          record?.extra_parameters?.share_id_expire_time
                        )
                      }}」</span
                    >
                  </template>
                  发布账号：{{ record?.extra_parameters?.nickname }}
                </a-tooltip>
              </span>
            </a-space>
          </template>
          <template v-if="column.key == 'multimedia'">
            <div
              class="image_con"
              v-if="record?.multimedia?.material_url"
              @click="handlePlay(record?.multimedia || {})"
            >
              <video :src="record?.multimedia?.material_url"></video>
              <div class="operate_con">
                <cu-icon
                  type="icon-24gl-playCircle"
                  style="font-size: 36px; color: #fff"
                />
              </div>
              <div class="bottom_con">
                <span>视频</span>
                <cu-icon
                  type="icon-changjing"
                  style="font-size: 14px; color: #fff; margin-left: 3px"
                />
              </div>
            </div>
            <div v-else>-</div>
          </template>
          <template v-if="column.key == 'title'">
            <span v-if="record?.title">{{ record?.title }}</span>
            <span v-if="record?.title && record?.caption">/</span>
            <span v-if="record?.caption?.length <= 100">{{
              record.caption.slice(0, 100)
            }}</span>
            <a-popover v-if="record?.caption?.length > 100">
              <template #content>
                <div
                  style="
                    max-width: 300px;
                    max-height: 400px;
                    overflow-y: auto;
                    padding: 10px;
                  "
                >
                  {{ record?.caption }}
                </div>
              </template>
              <span v-if="record?.caption" style="cursor: pointer"
                >{{ record.caption.slice(0, 100) }} <ellipsis-outlined
              /></span>
            </a-popover>

            <template v-if="record?.hashtag_name?.length">
              <br />
              <a-tag
                v-for="item in record?.hashtag_name"
                :key="item?.key || item"
                color="processing"
              >
                #{{ item?.value || item }}
              </a-tag>
            </template>
          </template>
          <template v-if="column.key == 'play_count'">
            {{
              record?.release_status_text == "发布成功"
                ? record?.play_count
                : "--"
            }}
          </template>
          <template v-if="column.key == 'comment_count'">
            {{
              record?.release_status_text == "发布成功"
                ? record?.comment_count
                : "--"
            }}
          </template>
          <template v-if="column.key == 'send_type'">
            <span v-if="record.send_type === 'qr_code'">扫码发布</span>
          </template>

          <template v-if="column.key == 'AmountOfData'">
            <span>播放量: {{ record.play_count??0}}</span>
            <br />
            <span>评论数: {{ record.comment_count?? 0 }}</span>
            <br />
            <span>分享数: {{ record.share_count?? 0}}</span>
          </template>

          <template v-if="column.key == 'release_status'">
            <a-tag :color="getStatusColor(record.release_status)">{{
              record?.release_status_text
            }}</a-tag>
            <div style="margin-top: 5px;" v-if="record.film_release?.platform == 'douyin' && record.release_status ==2 && record?.aweme_id">
              <a-button
                type="link"
                @click="goToTiktok(record)"
                size="small"
                >前往抖音查看</a-button
              >
            </div>
            
            <span v-if="record?.api_failed">{{ record?.api_failed }}</span>
            <!-- 发布的平台审核状态 0-无需审核 1-审核中 2-审核通过 3-审核失败   0无需处理   -->
            <div style="margin-top: 10px">
              <a-tag
                v-if="record?.platform_check_status_text"
                :color="getCheckStatus(record.platform_check_status)"
                >{{ record?.platform_check_status_text }}</a-tag
              >
              <span v-if="record.platform_check_status_text">{{
                record.release_status_text
              }}</span>
            </div>
          </template>
          <template v-if="column.key == 'associ_poi'">
            <a-space>
              {{ record?.associ_poi?.store_name || "--" }}
              <!-- </span> -->
            </a-space>
          </template>
          <template v-if="column.key == 'download_text'">
            <div>
              {{ record.download_text || "--" }}
            </div>
          </template>
          <template v-if="column.key == 'visibility_type_text'">
            <div>
              {{ record.visibility_type_text || "--" }}
            </div>
          </template>
          <template v-if="column.key == 'release_time'">
            <div>
              {{ record.release_time || "--" }}
            </div>
          </template>
          <template v-if="column.key == 'updated_at'">
            <div>
              {{ record.updated_at || "--" }}
            </div>
          </template>
          <template v-if="column.key == 'platform_account'">
            <a-space> {{ record?.platform_account?.nickname }} </a-space>
          </template>

          <template v-if="column.key == 'action'">
            <a-space>
              <a-button
                v-if="
                  record?.send_type === 'qr_code' &&
                  (record.release_status == 0 ||
                    record.release_status == 3 ||
                    record?.extra_parameters?.share_id_expire_time * 1000 >
                      Date.now())
                "
                type="link"
                @click="getQrImage(record)"
                size="small"
                >发布二维码</a-button
              >
              <a-button
                type="primary"
                @click="CancelTask(record)"
                size="small"
                :disabled="record.release_status != 0"
                v-if="record?.send_type !== 'qr_code'"
                >取消任务</a-button
              >

                          <!--     
            本地发布失败了, 必须要在exe进行重新发布
             -->
            <template v-if="record?.send_type !== 'qr_code' && record.release_status == 3 && record?.job_type == 2 && !ELECTRON">
              <a-tooltip placement="top">
              <template #title>
                <span>请到客户端点击重新发布</span>
              </template>
              <a-button
                type="primary"
                size="small"
                :disabled="true"
                >重新发布</a-button
              >
            </a-tooltip>
            </template>

              <a-button
                type="primary"
                @click="reReleaseHandle(record)"
                size="small"
                :disabled="record.release_status != 3"
                v-else-if="record?.send_type !== 'qr_code'"
                >重新发布</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>
    </a-spin>

    <!-- QRcode -->
    <QRCode :visible="qRCodeVisible" @onCancel="qRCodeVisible = false" />

    <PreviewModal
      :visible="previewVisible"
      :title="previewParams.title"
      :url="previewParams.url"
      :type="previewParams.type"
      @onCancel="previewVisible = false"
    />

    <!-- 自动发布 -->
    <AutomaticPublishing
      :visible="automaticPublishingVisible"
      @onCancel="automaticPublishingVisible = false"
      @onConfirm="onConfirmChange"
    />
  </div>
  <!-- 重新发布弹窗 -->
  <a-modal
    v-model:visible="reReleaseVisible"
    title="重新发布"
    centered
    @cancel="reReleaseClose"
  >
    <a-alert
      message="重新发布之前，请您先确认该账号是否在线。"
      type="warning"
      show-icon
      style="margin: 0 0 10px 0; padding: 8px 2px !important"
    />
    <a-form
      :model="reReleaseForm"
      :rules="reReleaseRules"
      layout="inline"
      ref="reReleaseRef"
    >
      <a-form-item
        name="reReleaseType"
        label="发布方式"
        :rules="reReleaseRules.reReleaseType"
      >
        <a-radio-group v-model:value="reReleaseForm.reReleaseType">
          <a-radio :value="1">立即发布</a-radio>
          <a-radio :value="2">选择时间</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        style="margin-top: 10px"
        label="发布时间"
        name="releaseTime"
        :rules="reReleaseRules.releaseTime"
        v-if="reReleaseForm.reReleaseType == '2'"
      >
        <a-range-picker
          :disabled-date="disabledDate"
          :disabled-time="disabledDateTime"
          style="width: 320px"
          format="YYYY/MM/DD HH:mm"
          v-model:value="reReleaseForm.releaseTime"
          :show-time="{ hideDisabledOptions: true }"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-space>
        <a-button @click="reReleaseClose">关闭</a-button>
        <a-button
          type="primary"
          @click="reReleaseSubmit"
          :loading="reReleaseLoading"
          >确定</a-button
        >
      </a-space>
    </template>
  </a-modal>

  <a-modal
    :visible="ModelUpState"
    @cancel="handleClose"
    :footer="null"
    :width="300"
  >
    <template #title>
      <div>
        <span>发布二维码</span>
      </div>
    </template>
    <div class="mobile">
      <div class="mobile-img">
        <img :src="MobileimgUrl" alt="" />
      </div>

      <a-tooltip placement="top">
        <template #title>
          <span
            >Android 和 iOS 支持分享到抖音发布页功能的最低抖音版本为： <br />
            ​Android：20.8.0 <br />
            ​iOS：21.5.0 ​</span
          >
        </template>
        <div class="mobile-title">请使用抖音扫描二维码</div>
      </a-tooltip>
    </div>
  </a-modal>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, createVNode } from "vue";
import {
  DownOutlined,
  QrcodeOutlined,
  SearchOutlined,
  UpOutlined,
  ExclamationCircleOutlined,
  QuestionCircleOutlined,
  EllipsisOutlined,
} from "@ant-design/icons-vue";
import QRCode from "./modules/QRCode.vue";
import dayjs from "dayjs";
import CreateFixed from "../components/CreateFixed/index.vue";
import AutomaticPublishing from "./modules/AutomaticPublishing.vue";
import { useRoute, useRouter } from "vue-router";
import request from "../../../common/utils/request";
import { Modal, message } from "ant-design-vue";
import PreviewModal from "@/components/PreviewModal/index.vue";
import { get } from "lodash";
import utils from "../../../common/utils/utils";

export default defineComponent({
  name: "ReleaseList",
  components: {
    DownOutlined,
    QrcodeOutlined,
    QRCode,
    SearchOutlined,
    UpOutlined,
    AutomaticPublishing,
    QuestionCircleOutlined,
    PreviewModal,
    EllipsisOutlined,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      modelLoading: false,
      MobileimgUrl: "",
      ModelUpState: false,
      previewVisible: false,
      previewParams: {
        title: "",
        url: "",
        type: "video",
      },
      count: 0,
      qRCodeVisible: false,
      automaticPublishingVisible: false,
      dateKey: 0,
      dateList: [
        {
          title: "昨日",
          key: 0,
        },
        {
          title: "7天",
          key: 1,
        },
        {
          title: "30天",
          key: 2,
        },
      ],
      ranges: {
        过去7天: [dayjs().startOf("day").subtract(6, "day"), dayjs()],
        过去30天: [dayjs().startOf("day").subtract(30, "day"), dayjs()],
        过去90天: [dayjs().startOf("day").subtract(90, "day"), dayjs()],
      },
      futureTime: [],
      futureTimeRanges: {
        未来7天: [dayjs(), dayjs().add(7, "day")],
        未来30天: [dayjs(), dayjs().add(30, "day")],
        未来365天: [dayjs(), dayjs().add(365, "day")],
      },

      send_id: "",
      dateTime: [],
      updateTime: [],
      status: undefined,
      statusOptions: [
        {
          value: "0",
          label: "待发布",
        },
        {
          value: "1",
          label: "发布中",
        },
        {
          value: "2",
          label: "发布成功",
        },
        {
          value: "3",
          label: "发布失败",
        },
        {
          value: "4",
          label: "抖音端删除或者不宜公开",
        },
        {
          value: "4",
          label: "失败",
        },
      ],
      releaseTypes: [
        {
          value: "qr_code",
          label: "扫码发布",
        },
      ],
      POIName: "",

      expand: true,

      dataSource: [],

      columns: [
        {
          title: "发布平台",
          dataIndex: "film_release",
          key: "film_release",
          width: 200,
        },
        {
          title: "成片",
          dataIndex: "multimedia",
          key: "multimedia",
          width: 200,
        },
        {
          title: "标题/描述",
          dataIndex: "title",
          key: "title",
          width: 250,
        },
        // {
        //   title: "播放量",
        //   dataIndex: "play_count",
        //   key: "play_count",
        //   align: "center",
        // },
        // {
        //   title: "评论数",
        //   dataIndex: "comment_count",
        //   key: "comment_count",
        //   align: "center",
        // },
        {
          title: "数据量",
          dataIndex: "AmountOfData",
          key: "AmountOfData",
          align: "center",
          width: 90,
        },
        {
          title: "状态",
          dataIndex: "release_status",
          key: "release_status",
          width: 300,
          align: "center",
        },
        {
          title: "门店POI",
          dataIndex: "associ_poi",
          key: "associ_poi",
          // width: 150,
        },
        {
          title: "允许他人保存视频",
          dataIndex: "download_text",
          key: "download_text",
        },
        {
          title: "设置谁可以看",
          dataIndex: "visibility_type_text",
          key: "visibility_type_text",
        },
        {
          title: "发布时间",
          dataIndex: "release_time",
          key: "release_time",
          width: 200,
        },
        {
          title: "更新时间",
          dataIndex: "updated_at",
          key: "updated_at",
          width: 200,
        },
        // {
        //   title: "发布账号",
        //   dataIndex: "platform_account",
        //   key: "platform_account",
        // },
        {
          title: "操作",
          key: "action",
          dataIndex: "action",
          width: 200,
          align: "center",
          fixed: "right",
        },
      ],

      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      selectedRowKeys: [], //取消发布勾选
      reReleaseVisible: false, //重新发布弹窗
      // 重新发布表单
      reReleaseForm: {
        reReleaseType: 1,
        releaseTime: "",
      },
      // 重新发布表单校验
      reReleaseRules: {
        reReleaseType: [
          {
            required: true,
            message: "请选择发布类型",
            trigger: "change",
          },
        ],
        releaseTime: [
          {
            required: true,
            trigger: "change",
            validator: (rule, value) => {
              console.log(value);
              if (!value) {
                return Promise.reject("请选择发布时间");
              }
              if (value && value.length >= 2) {
                const [startTime, endTime] = value;
                const duration = dayjs(endTime).diff(
                  dayjs(startTime),
                  "minute"
                );
                if (duration < 5) {
                  return Promise.reject("开始时间和结束时间不能小于5分钟");
                }
              }
              return Promise.resolve();
            },
          },
        ],
      },
      rePublishId: null, //重新发布的id
      reReleaseLoading: false,
      reReleaseRef: null, //重新发布表单实例
      onBatchLoading: false,
    });

    const filmId = computed(() => route.query?.filmId);

    const send_type = computed(() => route.query?.send_type);

    const qrCode = () => {
      state.qRCodeVisible = true;
    };

    // 扫码发布
    const goQrRelease = () => {
      router.push({
        name: "QrRelease",
      });
    };

    // 自动发布
    const automaticPublishing = () => {
      state.automaticPublishingVisible = true;
    };

    const isElectron = computed(() => {
      return import.meta.env.ELECTRON;
    });

    //发布二维码
    const getQrImage = async (data) => {

      state.modelLoading = true;
      let BASE_URL = isElectron.value
        ? import.meta.env.VITE_SITE_URL
        : window.location.origin;

      let url =
        BASE_URL +
        `/material/pages/qrcode/dy?type=detail&film_release_id=${data.film_release_id}&detail_id=${data.id}`;

      let qrcodeParams = {
        qrCode: url,
      };

      const res1 = await request.get("/public", "/qrcode", qrcodeParams);
      state.MobileimgUrl = res1.url;
      state.modelLoading = false;
      state.ModelUpState = true;
    };

    const handleClose = () => {
      state.ModelUpState = false;
    };

    const onConfirmChange = () => {
      state.automaticPublishingVisible = false;
      router.push({
        name: "AutoRelease",
      });
    };

    const dateClick = (key) => {
      state.dateKey = key;
    };

    const expandClick = () => {
      state.expand = !state.expand;
    };

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getDataList();
    };

    const handlePlay = (record) => {
      state.previewParams = {
        title: record?.material_name,
        url: record?.material_url,
        type: "video",
      };
      state.previewVisible = true;
    };

    const querySearchClick = () => {};

    const resettingClick = () => {};
    const routerQuery = computed(() => {
      return route.query;
    });
    const getDataList = () => {
      state.loading = true;
      request
        .get("/work_ai", "/user/filmrelease/details", {
          page: state.page,
          pageSize: state.pageSize,
          filmId: filmId.value,
          platform: routerQuery?.value?.platform,
        })
        .then((res) => {
          state.dataSource = res.result;
          state.loading = false;
        })
        .catch(() => {
          state.loading = false;
        });
    };
    getDataList();
    // 取消发布
    const CancelTask = (record) => {
      Modal.confirm({
        title: "确定取消该发布吗?",
        icon: createVNode(ExclamationCircleOutlined),
        content: "",
        okText: "确定",
        cancelText: "取消",
        onOk() {
          return new Promise((resolve, reject) => {
            request
              .put("/work_ai", "/user/filmrelease/cancel/batch", {
                ids: `${record.id}`,
              })
              .then((res) => {
                if (res && res.result) {
                  message.success("删除成功");
                  getDataList();
                  resolve(); // 请求成功后调用 resolve
                } else {
                  reject(new Error("操作失败")); // 请求成功但结果不符合预期时调用 reject
                }
              })
              .catch((err) => {
                console.log(err);
                reject(err); // 请求失败时调用 reject
              });
          });
        },
        onCancel() {
          console.log("操作已取消");
        },
      });
    };
    // 批量取消
    const onBatchCancel = () => {
      state.onBatchLoading = true;
      request
        .put("/work_ai", "/user/filmrelease/cancel/batch", {
          ids: state.selectedRowKeys.join(","),
        })
        .then((res) => {
          if (res && res.result) {
            message.success("取消成功");
            state.selectedRowKeys = [];
            console.log(state.selectedRowKeys);
            getDataList();
          }
          state.onBatchLoading = false;
        })
        .catch((err) => {
          console.log(err);
          state.onBatchLoading = false;
        });
    };
    const getTitle = computed(() => {
      switch (route.query.platform) {
        case "xiaohongshu":
          return "小红书";
        case "sina_weibo":
          return "新浪微博";
        case "douyin":
          return "抖音";
        case "toutiao":
          return "头条号";
        case "facebook":
          return "Facebook";
        case "instagram":
          return "Instagram";
        case "kuaishou":
          return "快手";
        case "weixinshipinhao":
          return "微信视频号";
        case "bilibili":
          return "哔哩哔哩";
      }
    });
    const backClick = () => {
      router.push({
        name: "ReleaseList",
        query: {
          platform: routerQuery?.value?.platform,
        },
      });
    };
    // 列表选中事件
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          state.selectedRowKeys = selectedRowKeys;
          console.log(state.selectedRowKeys);
        },
        getCheckboxProps: (record) => ({
          disabled: record.release_status != 0,
          release_status: record.release_status,
        }),
      };
    });
    // 重新发布
    const reReleaseHandle = (record) => {
      state.reReleaseVisible = true;
      state.rePublishId = record.id;
    };

    // 前往抖音查看
    const goToTiktok =(record)=>{
        window.open(`https://www.douyin.com/video/${record.aweme_id}`)
    }

    // 禁用日期
    const disabledDate = (current) => {
      // 禁用今天的当前时间之后半个小时之前的时间
      const thirtyMinutesAgo = dayjs().subtract(30, "minute");
      return current && current < thirtyMinutesAgo;
    };
    // 禁用时间
    const disabledDateTime = (current) => {
      const now = dayjs();
      const isToday = current && current.isSame(now, "day");

      if (!isToday) return {};

      const thirtyMinutesLater = now.add(30, "minute");
      const thirtyMinutesLaterHour = thirtyMinutesLater.hour();
      const thirtyMinutesLaterMinute = thirtyMinutesLater.minute();

      return {
        disabledHours: () => {
          return Array.from({ length: 24 }, (_, i) => i).filter(
            (hour) => hour < thirtyMinutesLaterHour
          );
        },
        disabledMinutes: (selectedHour) => {
          if (selectedHour === thirtyMinutesLaterHour) {
            return Array.from({ length: 60 }, (_, i) => i).filter(
              (minute) => minute < thirtyMinutesLaterMinute
            );
          }
          return [];
        },
      };
    };
    // 重置重新发布表单
    const initReleaseForm = () => {
      state.reReleaseVisible = false;
      state.reReleaseRef && state.reReleaseRef.resetFields();
      state.reReleaseForm.releaseTime = "";
      state.rePublishId = null;
    };
    // 关闭重新发布弹窗
    const reReleaseClose = () => {
      initReleaseForm();
    };
    // 重新发布
    const reReleaseSubmit = () => {
      console.log(state.reReleaseForm);
      state.reReleaseRef &&
        state.reReleaseRef
          .validate()
          .then((res) => {
            const params = {
              release_type: state.reReleaseForm.reReleaseType,
              id: state.rePublishId,
            };
            if (state.reReleaseForm.reReleaseType == 2) {
              params.start_time = dayjs(
                state.reReleaseForm.releaseTime[0]
              ).format("YYYY-MM-DD HH:mm");
              params.end_time = dayjs(
                state.reReleaseForm.releaseTime[1]
              ).format("YYYY-MM-DD HH:mm");
            }
            state.reReleaseLoading = true;
            request
              .put("/work_ai", "/user/filmrelease/rePublish", params)
              .then((successRes) => {
                console.log(successRes);
                if (successRes && successRes.result) {
                  message.success("设置成功");
                  initReleaseForm();
                  getDataList();
                }
                state.reReleaseLoading = false;
              })
              .catch((errorRes) => {
                state.reReleaseLoading = false;
              });
          })
          .catch((err) => {
            console.log(err);
          });
    };
    // 处理发布状态颜色值
    // 发布状态：0-待发布，1-发布中，2-发布成功，3-发布失败，4-已删除，5-抖音端删除或者不宜公开 6-已预约发布
    const getStatusColor = (status) => {
      switch (status) {
        case 1:
          return "processing";
        case 2:
          return "success";
        case 6:
          return "success";
        case 3:
          return "red";
        default:
          return "default";
      }
    };
    // 处理审核状态颜色值
    // 审核状态：1-审核通过，2-审核通过，3.审核失败
    const getCheckStatus = (status) => {
      switch (status) {
        case 1:
          return "blue";
        case 2:
          return "success";
        case 3:
          return "error";
        default:
          return "default";
      }
    };

    const ELECTRON =  import.meta.env.ELECTRON

    return {
      ...toRefs(state),
      ELECTRON,
      filmId,
      qrCode,
      dateClick,
      expandClick,
      handleTableChange,
      pagination,
      handlePlay,
      querySearchClick,
      resettingClick,
      automaticPublishing,
      onConfirmChange,
      goQrRelease,
      getTitle,
      backClick,
      rowSelection,
      reReleaseHandle,
      reReleaseSubmit,
      disabledDate,
      disabledDateTime,
      initReleaseForm,
      reReleaseClose,
      CancelTask,
      onBatchCancel,
      routerQuery,
      getStatusColor,
      getCheckStatus,
      getQrImage,
      handleClose,
      utils,
      send_type,
      goToTiktok
    };
  },
});
</script>

<style lang="less" scoped>
// 头部样式
.router-name {
  font-size: 16px;
  font-weight: 600;
  color: #101011;
  display: flex;
  align-items: center;

  .back {
    color: #000;
    border: 1px solid #e0e0e6;
    margin-right: 10px;
    border-radius: 5px;
  }
}

.top_tips{
  padding-left: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: #737a87;
  margin-top: 5px;
  line-height: 1.5;
}

.image_con {
  cursor: pointer;
  width: 140px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  position: relative;

  video {
    max-width: 100%;
    max-height: 100%;
  }

  .operate_con {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
  }

  &:hover {
    .operate_con {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .bottom_con {
    width: 100%;
    height: 30px;
    left: 0;
    bottom: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    font-size: 12px;
    padding-left: 5px;
  }
}

.box {
  .button {
    width: 156px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2878ff;
    border: 1px solid #2878ff;
    cursor: pointer;
    border-radius: 8px;

    &:hover {
      color: #2878ff;
      border: 1px solid #2878ff;
    }
  }

  .publish-btn {
    // width: 180px;
    height: 46px;
    background: linear-gradient(125deg, #2878ff 18%, #ff9165 80%);
    border-radius: 8px;
    box-shadow: 0 6px 15px #2878ff4d;
    border: none;
  }

  .title {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .date-list {
    width: 240px;
    height: 35px;
    background-color: #ff916514;
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 0 10px;
    border-radius: 5px;

    .date-btn {
      background: #fff;
      padding: 2px 0;
      border-radius: 5px;
      color: #2878ff;
      box-shadow: 4px 4px 10px #2878ff33;
    }
  }

  .video-data-list {
    width: 100%;
    margin: 15px 0;

    .item-list {
      width: 220px;
      height: 148px;
      background: rgba(255, 255, 255, 0.6);
      margin-right: 20px;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.05);
      padding: 18px 27px 15px 21px;
      min-width: 200px;
      cursor: pointer;

      .sub-title {
        font-size: 16px;
        color: #555;
      }

      .num {
        font-size: 32px;
        font-weight: 500;
        margin-top: 5px;
      }

      .icon-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f6dcf1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.mobile-img {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 280px;
  }
}

.mobile-title {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
